<script type='text/template' id='product_template'>
  <li id="product_{{ product.id }}" data-product-id='{{ product.id }}' data-taxons="{{ product.taxon_ids }}" class="product p-2 col-6 col-md-3 col-lg-2">
    <div class="m-1 p-2 card bg-light">
      <nav class="navbar navbar-light bg-light justify-content-between px-0 pt-0" style="background-color:transparent !important;">
        <a class=" sort-handle js-sort-handle">
          <%= svg_icon name: "move.svg", width: '22', height: '22' %>
        </a>
        <div class="dropdown ">
          <button class="btn btn-outline-secondary dropdown-toggle products-ddb btn-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <%= svg_icon name: "chevron-down.svg", width: '18', height: '18' %>
          </button>
          <div class="dropdown-menu dropdown-menu-right p-0 mt-1" aria-labelledby="dropdownMenuButton">
            <a href="{{ edit_product_url product.id }}" class="edit-product js-edit-product dropdown-item p-1"><%= Spree.t(:edit) %></a>
            <a href="javascript:;" class="delete-product js-delete-product dropdown-item p-1"><%= Spree.t(:remove) %></a>
          </div>
        </div>
      </nav>
      <div class='image'>
        {{#if product.image }}
          <img src='{{product.image}}' alt='{{ product.name }}' class='thumbnail rounded border border' />
        {{ else }}
          <img src='<%= image_path("noimage/small.png") %>' alt='{{product.name }}' class='thumbnail' />
        {{/if}}
      </div>
      <div class="p-0 pt-1 text-center product-info">
        <p class="name card-text">{{ product.name }}</p>
        <p class="price card-text">{{ product.display_current_currency_price }}</p>
      </div>
    </div>
  </li>
</script>
